<template>
    <div class="echart" ref="echartRef"></div>
</template>


<script setup>
import * as echarts from 'echarts';
 import { ref , onMounted } from "vue";
 
 const echartRef = ref(null);
 


let datas = [
  { value: 33,name: '摄像头',  percent: '10' },
  { value: 31,name: '温湿度',  percent: '40' },
  { value: 24,name: '风机', percent: '30' },
  { value: 15,name: '门禁机',  percent: '20' }
]

let colors = ['#6e7ce0', '#5fede1', '#388df6', '#7fdefe']
let legendData = []
for (var j = 0; j < datas.length; j++) {
  var data = {
    name: datas[j].name,
    icon: 'circle',
    textStyle: {
      fontSize: 18,
      color: colors[j]
    }
  }
  legendData.push(data)
}
let objData = array2obj(datas, 'name')
let option = {
  legend: {
    orient: 'vertical',
    top: 'center',
    left: '50%',
    itemGap: 10,
    data: legendData,
    formatter: function (name) {
      return `{title|${name}}{value|${objData[name].value}}{unit|个}{percent|${objData[name].percent}}{unit|%}`
    },
    textStyle: {
      rich: {
        value: {
          color: '#82baff',
          fontSize: 18,
          fontWeight: 600,
          fontFamily: 'HuaKang',
          padding: [0, 10, 0, 10]
        },
        unit: {
          color: '#82baff',
          fontSize: 14,
          fontWeight: 600,
          fontFamily: 'HuaKang',
          padding: [0, 50, 0, 0]
        },
        percent: {
          color: '#82baff',
          fontSize: 24,
          fontWeight: 600,
          fontFamily: 'HuaKang',
          padding: [0, 10, 0, 0]
        }
      }
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  color: colors,
  visualMap: {
    show: false,
    min: 1,
    max: 60,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '80%',
      center: ['24%', '50%'],
      label: {
        show:false
      },
      data: datas,
      roseType: 'radius',
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200
      }
    }
  ]
}
/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
 * @description 详细描述
 * @param {参数类型} array 传入的数组 [{a:"1",b:"2"},{a:"2",b:"3"}]
 * @param {参数类型} key  属性名 a
 * @return {返回类型说明}
 * @exception [违例类型] [违例类型说明]
 */
function array2obj (array, key) {
  var resObj = {}
  for (var i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}

onMounted( () => {
    let echart = echarts.init(echartRef.value);
    echart.setOption(option);
})



</script>



<style scoped lang="less">
    
</style>